<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>部门管理</title>
    <link rel="stylesheet" href="../css/department.css">
    <script src="/js/jquery.js"></script>
</head>
<body>

<div class="container">
    <!-- 标题 -->
    <h1>部门信息</h1>

    <!-- 查询部门表单 -->
    <form class="search-form">
        <input type="text" id="query" name="query" placeholder="请输入部门名称" />
        <button type="button" class="button" onclick="searchDepartment()">查询</button>
        <!-- 新增部门按钮 -->
        <a href="add_department.html" class="button">新增部门</a>
    </form>

    <!-- 部门列表 -->
    <table id="departmentTable" class="department-table">
        <thead>
        <tr>
            <th>部门ID</th>
            <th>部门名称</th>
            <th>部门领导ID</th>
            <th>联系电话</th>
            <th>位置</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="departmentTableBody">
        </tbody>
    </table>

</div>

<script>
    // 页面加载时，获取部门数据
    $(document).ready(function () {
        loadDepartments();
    });

    // 查询部门
    window.searchDepartment = function () {
        const query = $("#query").val();
        const params = {
            "query": query
        };
        loadDepartments(params);
    };

    // 动态加载部门数据
    function loadDepartments(params) {
        $.ajax({
            url: "/queryDepartment",  // 假设的后端查询部门数据接口路径，需按实际调整
            method: "GET",
            contentType: "application/json",
            data: JSON.stringify(params),
            success: function (res) {
                renderTable(res);  // 直接传入后端返回的全部数据进行渲染
            },
            error: function () {
                alert("加载数据失败，请检查服务端是否启动。");
            }
        });
    }

    // 渲染表格
    function renderTable(data) {
        const tbody = $("#departmentTableBody");
        tbody.empty();
        if (data.length === 0) {
            tbody.append("<tr><td colspan='6'>没有数据</td></tr>");
            return;
        }
        data.forEach(item => {
            const row = `
                        <tr>
                            <td>${item.departmentid}</td>
                            <td>${item.departname}</td>
                            <td>${item.leaderid}</td>
                            <td>${item.phone}</td>
                            <td>${item.location}</td>
                            <td>
                                <a href="edit_department.html?id=${item.departmentid}" class="button">修改</a>
                                <button class="delete-btn" onclick="deleteDepartment(${item.departmentid})">删除</button>
                            </td>
                        </tr>`;
            tbody.append(row);
        });
    }

    // 删除部门
    window.deleteDepartment = function (departmentId) {
        if (confirm("删除该部门信息吗？")) {
            $.ajax({
                url: "/deleteDepartmentById",  // 假设的后端删除部门接口路径，需按实际调整
                method: "POST",
                data: { dId: departmentId },
                success: function (res) {
                        alert("删除成功！");
                        loadDepartments();  // 删除成功后重新加载全部数据
                },
                error: function () {
                    alert("删除操作失败！");
                }
            });
        }
    }
</script>
</body>
</html>